<template>
  <div class="AttentionBox">
      <div class="back">
          <span class="iconfont icon-xiangzuojiantou lf" @click="$router.go(-1)"></span>
          <span>我的关注</span>
      </div>
      <div class="AttentionContent">
          <div class="ACBox" v-for="item in follow" :key="item.userId">
            <!-- <router-link tag="div" class="ACBox" v-for="item in follow" :key="item.userId" :to="'/singersong?id='+item.userId"> -->
                <div class="ACImg">
                    <img :src="item.avatarUrl" alt="">
                </div>
                <div class="text">
                    <h3>{{item.nickname}}</h3>
                    <p>{{item.py}}</p>
                </div>
            <!-- </router-link> -->
          </div>
      </div>
  </div>
</template>

<script>
import {getUserFollows} from '../../api/my';
export default {
    data(){
        return{
            follow:[],// 用户关注的列表
        }
    },
    methods:{
        // 获取我的关注接口
        getUserFollowsFun(){
            getUserFollows({uid:window.localStorage.uid}).then(data=>{
                console.log(data)
                this.follow = data.follow
                console.log(this.follow)
            })
        },
    },
    created(){
        console.log(window.localStorage.uid)
        this.getUserFollowsFun();// 调用我的关注接口
    }
}
</script>

<style lang="less">
    .AttentionBox{
        .back{
            line-height: 50px;
            background-color: #d44439;
            color: white;
            font-weight: bold;
            .lf{
                padding: 10px;
            }
        }
        .AttentionContent{
            .ACBox{
                    display: flex;
                margin: 15px 10px;
                align-items: center;
                .ACImg{
                    flex: 2;
                    width: 60px;
                    height: 60px;
                    background-color: pink;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .text{
                    flex: 9;
                    border-bottom: 1px solid #ccc;
                    height: 59px;
                    h3{
                        font-weight: bold;
                        font-size: 16px;
                        margin-top: 5px;
                        line-height: 25px;
                    }
                    p{
                        color: #ccc;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>